<template>
  <div class="login-container">
    <div class="bg-filter"></div>
    <!-- <div class="left-cont">
      <div class="desc-cont">
        <div class="desc-item">AI悟道</div>
        <div class="desc-item">大数据模型训练</div>
        <div class="desc-item small">智能AI波段短线工具</div>
      </div>
    </div> -->
    <div class="out-wrap">
      <div class="left-cont">
        <div class="desc-cont">
          <div class="desc-item">AI悟道</div>
          <div class="desc-item">大数据模型训练</div>
          <div class="desc-item small">智能AI波段短线工具</div>
        </div>
      </div>
      <div class="form-wrap">
        <el-form
          ref="registerForm"
          :model="registerForm"
          :rules="registerRules"
          class="login-form"
          auto-complete="off"
          label-position="left"
          v-if="pageType === 'register'"
        >
          <div class="title-container">
            <h3 class="title">注册</h3>
          </div>
          <el-form-item prop="mobile">
            <span class="svg-container">
              <svg-icon icon-class="mobile" />
            </span>
            <el-input
              ref="mobile"
              v-model="registerForm.mobile"
              placeholder="请输入手机号码"
              name="mobile"
              type="text"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="validationCode">
            <span class="svg-container">
              <svg-icon icon-class="validation-code" />
            </span>
            <el-input
              ref="validationCode"
              v-model="registerForm.validationCode"
              placeholder="请输入短信验证码"
              name="validationCode"
              type="text"
              tabindex="1"
              auto-complete="off"
            >
            </el-input>
            <el-button
              :loading="loading"
              class="validate-code"
              :disabled="validateButtonDisable"
              type="primary"
              size="mini"
              @click="getValidationCode"
              >{{ validateButtonText }}
            </el-button>
          </el-form-item>

          <el-form-item prop="password1">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password1"
              v-model="registerForm.password1"
              :type="passwordType"
              placeholder="请输入密码"
              name="password1"
              tabindex="2"
              auto-complete="on"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>
          <el-form-item prop="password2">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password2"
              v-model="registerForm.password2"
              :type="passwordType"
              placeholder="请再次输入密码"
              name="password2"
              tabindex="2"
              auto-complete="on"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>
          <el-form-item prop="name">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              ref="name"
              v-model="registerForm.name"
              placeholder="请输入昵称"
              name="name"
              type="text"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="email">
            <span class="svg-container">
              <svg-icon icon-class="email" />
            </span>
            <el-input
              ref="email"
              v-model="registerForm.email"
              placeholder="请输入邮箱"
              name="email"
              type="text"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="inviteKey">
            <span class="svg-container">
              <svg-icon icon-class="inviteKey" />
            </span>
            <el-input
              ref="email"
              v-model="registerForm.inviteKey"
              placeholder="邀请码"
              name="email"
              type="text"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>

          <div>
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              @click.native.prevent="handleRegister"
              >注册
            </el-button>
          </div>
          <div>
            <el-button
              style="width: 100%"
              type="text"
              @click.stop="pageType = 'login'"
            >
              已有帐号？ 点此登录
            </el-button>
          </div>
        </el-form>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="off"
          label-position="left"
          v-if="pageType === 'login'"
        >
          <div class="title-container">
            <h3 class="title">登录</h3>
          </div>

          <el-form-item prop="username">
            <span class="svg-container">
              <svg-icon icon-class="mobile" />
            </span>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="请输入手机号码"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="password">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>

          <div>
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              @click.native.prevent="handleLogin"
              >登录
            </el-button>
          </div>
          <el-row>
            <el-col :span="12">
              <el-button type="text" @click.stop="pageType = 'findPwd'">
                已有账号，忘记密码？
              </el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-button type="text" @click.stop="pageType = 'register'">
                没有账号？点此注册
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          ref="findPwdForm"
          :model="findPwdForm"
          class="login-form"
          auto-complete="off"
          label-position="left"
          v-if="pageType === 'findPwd'"
        >
          <div class="title-container">
            <h3 class="title">重置密码</h3>
          </div>
          <el-form-item prop="mobile">
            <span class="svg-container">
              <svg-icon icon-class="mobile" />
            </span>
            <el-input
              ref="mobile"
              v-model="findPwdForm.mobile"
              placeholder="请输入手机号码"
              name="mobile"
              type="text"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="validationCode">
            <span class="svg-container">
              <svg-icon icon-class="validation-code" />
            </span>
            <el-input
              ref="validationCode"
              v-model="findPwdForm.validationCode"
              placeholder="请输入短信验证码"
              name="validationCode"
              type="text"
              tabindex="1"
              auto-complete="off"
            >
            </el-input>
            <el-button
              :loading="loading"
              class="validate-code"
              :disabled="validateButtonDisable"
              type="primary"
              size="mini"
              @click="getValidationCode"
              >{{ validateButtonText }}
            </el-button>
          </el-form-item>

          <el-form-item prop="password1">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password1"
              v-model="findPwdForm.password1"
              :type="passwordType"
              placeholder="请输入密码"
              name="password1"
              tabindex="2"
              auto-complete="on"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>
          <el-form-item prop="password2">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password2"
              v-model="findPwdForm.password2"
              :type="passwordType"
              placeholder="请再次输入密码"
              name="password2"
              tabindex="2"
              auto-complete="on"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>
          <div>
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              @click.native.prevent="handleFindPwd"
              >提交
            </el-button>
          </div>
          <div>
            <el-button
              style="width: 100%"
              type="text"
              @click.stop="pageType = 'login'"
            >
              记得密码？ 点此登录
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drag-bg"></div>
    <div class="frame-modify windows" v-if="osPlat != 'mac'">
      <span class="modify-item small" @click.stop="modifyWindow('small')">
        <i class="iconfont icon-zuixiaohua"></i>
      </span>
      <span class="modify-item big" @click.stop="modifyWindow('big')">
        <i class="iconfont icon-3zuidahua-3"></i>
      </span>
      <span class="modify-item close" @click.stop="modifyWindow('close')">
        <i class="iconfont icon-guanbi1"></i>
      </span>
    </div>
    <Vue2Verify
      ref="verify"
      captcha-type="clickWord"
      @success="blockPuzzle"
    />
    <Vue2Verify
      ref="verifyCode"
      captcha-type="clickWord"
      @success="blockPuzzleCode"
    />
    <div class="upload-software upload-wrap" v-if="canUp">
      <UploadFile
        :fileExName="['dmg', 'exe', 'yaml', 'yml', 'zip', 'blockmap']"
        :limit="1"
        v-if="showUpload"
        :showFileList="false"
        :multipartUpload="true"
        @uploadSuc="uploadSuc"
      />
    </div>
  </div>
</template>

<script>
import Api from "@/api";
import { validUsername } from "@/utils/validate";
import { encryptStr } from "@/utils/aesUtils";
import Vue2Verify from "@/components/verifition/Verify";
import { ipcApiRoute } from "@/api/main";
import { ipc } from "@/utils/ipcRenderer";
import UploadFile from "@/components/uploadFileForSoftware";

export default {
  name: "Login",
  components: { Vue2Verify, UploadFile },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("请输入手机号码"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      showUpload: true,
      canUp: false,
      osPlat: "",
      pageType: "login",
      registerForm: {
        mobile: "",
        validationCode: "",
        password1: "",
        password2: "",
        name: "",
        avatar: "",
        gender: "male",
        inviteKey: "",
        captcha: null,
      },
      registerRules: {
        mobile: [
          { required: true, trigger: "blur", message: "请输入手机号码" },
        ],
        validationCode: [
          { required: true, trigger: "blur", message: "请输入验证码" },
        ],
        password1: [{ required: true, trigger: "blur", message: "请输入密码" }],
        password2: [
          { required: true, trigger: "blur", message: "请再次输入密码" },
        ],
        name: [{ required: true, trigger: "blur", message: "请输入昵称" }],
      },
      loginForm: {
        username: "",
        password: "",
        captcha: null,
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入手机号码" },
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      validationCodeForm: {
        codeType: "REGISTER",
        mobile: "",
        captcha: null,
      },
      findPwdForm: {
        mobile: "",
        validationCode: "",
        password1: "",
        password2: "",
        captcha: null,
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      validateButtonText: "获取验证码",
      validateButtonDisable: false,
      validateButtonDisableTimeout: 120,
      nowTime: "",
      platInfo: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    "loginForm.password"(val) {
      if (
        val == "upFile:13800138000;" &&
        this.loginForm.username == "13800138000"
      ) {
        this.canUp = true;
      } else {
        this.canUp = false;
      }
    },
    "loginForm.username"(val) {
      if (
        val == "13800138000" &&
        this.loginForm.password == "upFile:13800138000;"
      ) {
        this.canUp = true;
      } else {
        this.canUp = false;
      }
    },
  },
  mounted() {
    if (this.$route.query.register) {
      this.pageType = "register";
    }
    if (this.getOperatingSystem() == "Mac") {
      this.osPlat = "mac";
    } else if (this.getOperatingSystem() == "Windows") {
      this.osPlat = "windows";
    }
    this.computedTime();
    //
    setTimeout(() => {
      this.$nextTick(() => {
        this.getPlatInfo();
      });
    }, 250);
    //
  },
  methods: {
    testRa() {
      ipc.invoke(ipcApiRoute.ra, {
        url:"http://47.push2his.eastmoney.com/api/qt/stock/kline/get?secid=1.605339&ut=fa5fd1943c7b386f172d6893dbfba10b&fields1=f1,f2,f3,f4,f5,f6&fields2=f51,f52,f53,f54,f55,f56,f57,f58,f59,f60,f61&klt=101&fqt=1&end=20500101&lmt=240&_=1753430263587",
        type:"get",
      }).then((res) => {
        console.log(res);
      });
    },
    //
    getPlatInfo() {
      this.loading = true;
      ipc.send(ipcApiRoute.seekPlat, {});
      try {
        ipc.removeAllListeners(ipcApiRoute.getPlatInfo);
        ipc.on(ipcApiRoute.getPlatInfo, (event, result) => {
          console.log("result", result);
          this.platInfo = result;
          this.loading = false;
        });
      } catch (error) {
        console.log("error", error);
        ipc.on(ipcApiRoute.getPlatInfo, (event, result) => {
          console.log("result", result);
          this.platInfo = result;
          this.loading = false;
        });
      }
      setTimeout(() => {
        this.loading = false;
      }, 9 * 1000);
    },
    uploadSuc(data) {
      console.log(data);
      this.showUpload = false;
      setTimeout(() => {
        this.showUpload = true;
      }, 150);
    },
    modifyWindow(type) {
      ipc.send(ipcApiRoute.modifyWindow, {
        type,
      });
    },
    getOperatingSystem() {
      const platform = navigator.platform.toLowerCase();
      if (platform.includes("mac")) return "Mac";
      if (platform.includes("win")) return "Windows";
      return "Unknown";
    },
    refreshValidationCode() {
      this.$refs.verify.refresh();
      this.$refs.verifyCode.refresh();
    },
    computedTime() {
      setInterval(() => {
        this.nowTime = new Date().Format("yyyy/MM/dd hh:mm:ss");
      }, 1000);
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
    blockPuzzle(captcha) {
      // console.log(captcha, "@@@");
      switch (this.pageType) {
        case "login":
          this.loginForm.captcha = captcha;
          this.executeLogin();
          break;
        case "register":
          this.registerForm.captcha = captcha;
          this.executeRegister();
          break;
        case "findPwd":
          this.findPwdForm.captcha = captcha;
          this.executeFindPwd();
          break;
      }
    },
    blockPuzzleCode(captcha) {
      // console.log(captcha, "@@@");
      this.validationCodeForm.captcha = captcha;
      switch (this.pageType) {
        case "login":
          this.validationCodeForm.mobile = this.loginForm.mobile;
          this.validationCodeForm.codeType = "LOGIN";
          break;
        case "register":
          this.validationCodeForm.mobile = this.registerForm.mobile;
          this.validationCodeForm.codeType = "REGISTER";
          break;
        case "findPwd":
          this.validationCodeForm.mobile = this.findPwdForm.mobile;
          this.validationCodeForm.codeType = "RESET_PWD";
          break;
      }
      this.loading = true;
      Api.manager
        .validationCode(this.validationCodeForm)
        .then((res) => {
          this.loading = false;
          this.validateButtonDisable = true;
          this.validateButtonDisableTimeout = 120;
          this.validateButtonText =
            this.validateButtonDisableTimeout + "s后重发";
          setInterval(() => {
            if (this.validateButtonDisableTimeout <= 0) {
              this.validateButtonDisable = false;
              this.validateButtonText = "获取验证码";
            } else {
              this.validateButtonText =
                this.validateButtonDisableTimeout + "s后重发";
              this.validateButtonDisableTimeout--;
            }
          }, 1000);
        })
        .catch(() => {
          this.refreshValidationCode();
          this.loading = false;
        });
    },
    getValidationCode() {
      this.$refs.verifyCode.show();
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (!this.loginForm.captcha) {
            this.$refs.verify.show();
          } else {
            this.executeLogin();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (!this.registerForm.captcha) {
            this.$refs.verify.show();
          } else {
            this.executeRegister();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleFindPwd() {
      this.$refs.findPwdForm.validate((valid) => {
        if (valid) {
          if (!this.findPwdForm.captcha) {
            this.$refs.verify.show();
          } else {
            this.executeFindPwd();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    executeFindPwd() {
      this.loading = true;
      Api.manager
        .resetPwd({
          ...this.findPwdForm,
          mobile: this.findPwdForm.mobile.replace(/\s+/g, ""),
          password1: encryptStr(this.findPwdForm.password1),
          password2: encryptStr(this.findPwdForm.password2),
        })
        .then((res) => {
          this.$message({
            message: "重置成功，请前往登录",
            type: "success",
          });
          this.pageType = "login";
          this.loading = false;
        })
        .catch(() => {
          this.refreshValidationCode();
          this.findPwdForm.captcha = null;
          this.loading = false;
        });
    },
    executeRegister() {
      this.loading = true;
      Api.manager
        .register({
          ...this.registerForm,
          mobile: this.registerForm.mobile.replace(/\s+/g, ""),
          password1: encryptStr(this.registerForm.password1),
          password2: encryptStr(this.registerForm.password2),
        })
        .then((res) => {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.pageType = "login";
          this.loading = false;
        })
        .catch(() => {
          this.refreshValidationCode();
          this.registerForm.captcha = null;
          this.loading = false;
        });
    },
    executeLogin() {
      this.loading = true;
      this.loginForm.password = encryptStr(this.loginForm.password);
      //
      try {
        this.loginForm.clientMac = this.platInfo.macAddress;
        this.loginForm.clientName = this.platInfo.osInfo?.hostname;
      } catch (error) {}
      //
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || "/" });
          this.loading = false;
          window.location.reload(true);
        })
        .catch(() => {
          this.refreshValidationCode();
          this.loginForm.captcha = null;
          this.loading = false;
          this.loginForm.password = "";
        });
    },
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #fff;
$light_gray: #333;
$cursor: #333;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #333;
$light_gray: #333;

.login-container {
  min-height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff7743, #ff004c);
  background: url("~@/assets/bg.jpg") left top no-repeat;
  background-size: cover;
  overflow: hidden;
  .bg-filter {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.159);
    filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .left-cont {
    margin-right: 20%;
    .desc-cont {
      .desc-item {
        white-space: nowrap;
        user-select: none;
        font-size: 60px;
        font-weight: bold;
        color: #fff;
        letter-spacing: 5px;
        padding-top: 15px;
        &:first-child {
          padding-top: 0;
        }
        &.small {
          font-size: 45px;
        }
        /* background: linear-gradient(90deg, #fff, #ffd900, #ff004c, #fff);
        background-size: 800% 100%;
        background-clip: text;
        color: transparent;
        animation: gradient-flow 5s ease infinite; */
        @keyframes gradient-flow {
          0% {
            background-position: 0% 50%;
          }
          100% {
            background-position: 100% 50%;
          }
        }
      }
    }
  }

  .logo-wrap {
    max-width: 90%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-logo {
      display: flex;
      align-items: center;

      img {
        height: 90px;
      }

      .name {
        font-size: 26px;
        letter-spacing: 3px;
        margin-left: 10px;
      }
    }

    .time {
      color: rgba(20, 24, 30, 0.6);
    }
  }

  .login-form {
    position: relative;
    width: 350px;
    max-width: 100%;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(255, 20, 37, 0.05);
    background-color: #fff;
    border-radius: 9px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .validate-code {
    float: right;
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .out-wrap {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .desc {
    width: 50%;
    display: none;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-right: 134px;

    .desc-tit {
      width: 100%;
      font-size: 24px;
      font-weight: bold;

      .slogn {
        color: #2d61fc;
      }
    }

    .desc-info {
      width: 100%;
      font-size: 16px;
      margin-top: 32px;

      .info-item {
        border-bottom: 1px solid #c8ceda;
        padding-bottom: 16px;
        margin-bottom: 28px;

        .item-top,
        .item-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .item-name {
            font-weight: bold;
          }

          .ori-price {
            font-size: 12px;
            text-decoration: line-through;
            color: rgba(20, 24, 30, 0.6);
            display: none;
          }
        }

        .item-bottom {
          font-size: 12px;
          color: rgba(20, 24, 30, 0.6);
          margin-top: 10px;

          .item-tip {
            max-width: 75%;
          }

          .price {
            max-width: 20%;
            white-space: nowrap;
            display: none;

            .num {
              font-size: 16px;
              color: #2d61fc;
            }

            .unit {
              font-size: 12px;
            }
          }
        }
      }
    }

    .pal-logo {
      width: 100%;
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .logo-item {
        display: inline-block;
        margin-top: 24px;
        width: 32%;
        height: 30px;
        box-sizing: border-box;
        /* padding: 0 5px; */
        .logo-item-inner {
          height: 100%;
          /* background-color: #ccc; */
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }

  .form-wrap {
    /* width: 50%; */
  }

  .copyright {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
  }
  .frame-modify {
    position: fixed;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 10px;
    top: 0px;
    right: 20px;
    color: #fff;
    z-index: 9;
    font-size: 20px;
    width: 110px;
    height: 60px;
    align-items: center;
    z-index: 9999999999;
    .modify-item {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      cursor: pointer;
    }
  }
}
.upload-software {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #fff;
  z-index: 999;
}
.upload-wrap {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 9px;
  /* background-color: #eee; */
  border: 2px dashed #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  ::v-deep#upload-span {
    width: 100%;
    height: 100%;
    .upload-demo {
      width: 100%;
      height: 100%;
      .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .upload-btn {
        height: 30px;
        line-height: 30px;
      }
      .el-icon-plus {
        font-size: 30px;
        color: #ddd;
      }
    }
  }
}
</style>
